<template>
  <div class="index">
    <div class="formBox">
      <p class="item"><span class="name">商品编码 ：</span><input v-model="date.goods_sn" class="slong" placeholder="请输入内容"></input></p>
        <p class="item"><span class="name">商品名称 ：</span><input v-model="date.goods_name" class="slong" placeholder="请输入内容"></input></p>
        <p class="item"><span class="name">商品图片 ：</span>
            <img class="t2" :src="date.goods_logo">
            <input type="file" @change="upImg" id="imgTest" class="mel" accept=".gif,.jpg,.jpeg,.png" name="">
        </p>
        <p class="item"><span class="name">商品价格 ：</span>
            <input v-model="date.goods_price" value="" class="solt" placeholder="请输入内容"></input>
        </p>

        <p class="item"><span class="name">进货价格 ：</span>
            <input v-model="date.market_price" value="" class="solt" placeholder="请输入内容"></input>
        </p>
        <p class="item"><span class="name">保质日期 ：</span>
            <input v-model="date.goods_created_at" value="" class="solt" placeholder="请输入内容"></input>
        </p>

        <p class="item"><span class="name">商品库存 ：</span>
            <input v-model="date.goods_number" class="solt" placeholder="请输入内容"></input>
        </p>
        <p class="item"><span class="name">商品重量 ：</span>
            <input v-model="date.goods_weight" class="solt" placeholder="请输入内容"></input>
        </p>
<!--         <p class="item"><span class="name">商品分类 ：</span>
    <select v-model="date.category_id">
      <option v-for="(item,index) in list" :value="item.id">{{item.category_name}}</option>
    </select>
</p> -->
        <p class="item"><span class="name">商品地区 ：</span>
            <select v-model="date.zone_id">
              <option v-for="(item,index) in addressList" :value="item.id">{{item.zone_name}}</option>
            </select>
        </p>
        <p class="item"><span class="name">是否上架 ：</span>
            <select v-model="date.is_sale">
              <option value="1">上架</option>
              <option value="2">下架</option>
            </select>
        </p>
        <p class="item"><span class="name">是否热门 ：</span>
            <select v-model="date.is_hot">
              <option value ="1">热门</option>
              <option value ="2">不热门</option>
            </select>
        </p>
        <p class="item"><span class="name">是否推荐 ：</span>
            <select v-model="date.is_recommend">
              <option value ="1">推荐</option>
              <option value ="2">不推荐</option>
            </select>
        </p>
        <p class="item"><span class="name">搜索关键字 ：</span>
            <input type="text" v-model="date.keyword" name="" placeholder="请输入内容">
        </p>
        <p class="item inputBox"><button @click="submit" class="submitInput">确定</button><button @click="empty" class="emptyInput">重置</button></p>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import { Get, Post ,Put ,Delete} from '@/config/api'
export default {
  name: 'index',
  data() {
    return {
        listId:'',//添加商品的id
        list:[],
        date:{
          goods_name:'',
          goods_logo:'',
          goods_price:'',
          goods_number:'',
          goods_weight:'',
          category_id:1,
          is_sale:1,
          is_hot:1,
          is_recommend:1,
          zone_id:1,
          keyword:'',
          market_price:'',
          goods_created_at:'',
          goods_sn:''
        },
        type:[],
        addressList:[]
    }
  },
  mounted(){
    //this.getData()
    this.getAddress()
  },
  computed:{
    //检查表单
    VueFrom(){
      if(this.Input(this.date.goods_name)&&this.Input(this.date.goods_logo)&&this.Input(this.date.goods_price)&&this.Input(this.date.goods_number)){
        return true
      }else{
        return false
      }
    }
  },
  methods: {
    //获取商品分类
/*    async getData() {
      if(this.Check()){
        let reg=await Get('/goods/category?parent_id=0',this.$store.state.token)
        this.list=reg.data
      }
    },*/
    //获取商品地区
    async getAddress() {
      if(this.Check()){
        let reg=await Get('/goods/zone?_sort=id',this.$store.state.token)
        this.addressList=reg.data
      }
    },
    //提交信息
    async submit() {
      if(this.VueFrom){
        this.$store.dispatch("loadOpen")
        let that=this
        var data={
            "goods_name":this.date.goods_name,
            "goods_logo":this.date.goods_logo,
            "goods_price":this.date.goods_price,
            "goods_number":this.date.goods_number,
            "goods_weight":this.date.goods_weight,
            "category_id":2,
            "zone_id":this.date.zone_id,
            "is_sale":this.date.is_sale,
            "is_hot":this.date.is_hot,
            "is_recommend":this.date.is_recommend,
            "keyword":this.date.keyword,
            "market_price":this.date.market_price,
            "goods_created_at":this.date.goods_created_at,
            "goods_sn":this.date.goods_sn
        };
        await Post('/goods',this.$store.state.token,data).then(function(reg){
            //this.listId=reg.data.data.id
            this.addMore(reg.data.id)
            this.$router.push('/regionPrcList?id='+this.date.zone_id)
            
        }.bind(this)).catch(function(err){
            alert(err.data.message);
        })
        this.empty()
        this.$store.dispatch("loadClose");

        
      }else{
        alert('请正确填写信息')
      }
      
    },
    //添加详细信息
    async addMore(val){
      let date={
        "goods_id":val,
        "describe":"商品详情描述"
      }
      await Post('/goods/describe',this.$store.state.token,date).then(function(){
        alert('添加成功')
      })
      console.log(this.date.zone_id)
      this.$store.dispatch("loadClose");
    },
    //清空
    empty() {
      for(var key in this.date){
        this.date[key]=''
      }
    },
    upImg(e){
        /*let that=this
        let reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
               that.date.goods_logo=this.result
            };
        })(e.target.files[0]);
        reader.readAsDataURL(e.target.files[0]);*/
        let file = e.target.files[0]; //input 
        if( file.size > 0.3*1024*1024 ){  //用size属性判断文件大小不能超过200k
          alert( "你上传的文件太大了！" ) 
        }else{
          let that=this
          let reader = new FileReader(); 
          reader.readAsDataURL(file); 
          reader.onload = function(e){ 
            var res = this.result; 
            that.date.goods_logo=this.result 
          } 
        }
    }

  }
}

</script>
